<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--下面的语句<meta name="viewport"> 是HTML中用于控制网页在移动设备上显示方式的标签
      width=device-width：让网页宽度等于设备屏幕宽度
      initial-scale=1.0：设置页面初始缩放比例为1倍（不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏图片布局展示</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <!-- 左侧大图区域 -->
    <div class="left-section">
        <div class="image-wrapper">
            <img src="login.jpeg" alt="帮助100万家企业实现智能制造" class="main-image" id="leftImage">
            <!--<div class="image-info">-->
                <!--<h2 class="image-title">雄伟山脉</h2>-->
                <!--<p class="image-desc">海拔5000米的高山在晨光中显得格外壮观</p>-->
            <!--</div>-->
        </div>
    </div>

    <!-- 右侧小图区域 -->
    <div class="right-section">
        <div class="image-wrapper">
            <img src="" alt="宁静的湖泊景色 - 清澈的湖水倒映着周围的山峰和树木" class="main-image" id="rightImage">
            <!--<div class="image-info">-->
                <!--<h2 class="image-title">宁静湖泊</h2>-->
                <!--<p class="image-desc">清澈见底的湖水宛如一面镜子倒映着蓝天</p>-->
            <!--</div>-->
        </div>
    </div>

    <!-- 控制面板 -->
    <div class="control-panel">
        <div class="panel-header">
            <!--
                下面的<i>标签会产生斜体文字
                fas fa-sliders-h 是一个Font Awesome 图标库中的一个图标类名组合
            -->
            <i class="fas fa-sliders-h">斜体</i>
            <!--
                <span>标签本身不包含任何特殊的语义，也不具有任何默认的视觉样式
                <span>的主要作用是将文档中的一小部分文本或内联内容组合起来，以便通过CSS进行样式化
                 或者通过JavaScript进行操作当需要对文本中的特定部分应用独特样式或行为时，可以使用<span>标签
                <span>标签本身没有固定格式表现，只有应用样式时才会产生视觉变化(也就是说不应用样式就跟不存在一样)
            -->
            <span>图片控制面板</span>
        </div>

        <div class="panel-content">
            <div class="control-group">
                <h3>布局选项</h3>
                <div class="layout-buttons">
                    <!--
                    HTML中的<button>元素用于创建可点击的按钮，是表单和交互界面的核心组件。以下是详细说明
                        基础语法 <button type="button">点击我</button>
                        关键属性
                            ‌type 属性‌（控制按钮行为）有如下选择
                            submit（默认）          提交表单，点击后提交所属表单的数据
                            button：                普通按钮（无默认行为），需要通过JavaScript定义功能
                            reset：                 重置表单，点击后重置表单中的所有输入内容

                    data-layout本身不是HTML标准属性，而是
                    若用于存储数据 → ‌自定义数据属性‌（通用功能，参考HTML5 data-*规范）
                    若用于控制布局 → ‌框架/库的自定义属性

                    html button onclick 是 HTML 中为按钮元素添加点击事件处理的一种方式当用户单击按钮时，会触发指定的 JavaScript 代码或函数
                    -->
                    <button class="layout-btn" data-layout="horizontal">水平布局</button>
                    <button class="layout-btn" data-layout="vertical">垂直布局</button>
                </div>
            </div>

            <div class="control-group">
                <h3>图片切换</h3>
                <div class="image-selector">
                    <button class="select-btn" data-side="left">更换左图</button>
                    <button class="select-btn" data-side="right">更换右图</button>
                </div>
            </div>

            <div class="control-group">
                <h3>显示效果</h3>
                <div class="effect-controls">
                    <div class="effect-item">
                        <!--
                            HTML <label> 标签的 for 属性用于将标签文本与特定的表单控件(比如下面的input)进行显式关联
                            for 属性的值必须与目标表单元素的 id 属性值完全匹配，从而建立一对一绑定
                                这种关联带来了以下主要好处：

                        -->
                        <label for="opacity">透明度</label>
                        <input type="range" id="opacity" min="0" max="100" value="100">
                    </div>
                    <div class="effect-item">
                        <label for="blur">模糊度</label>
                        <input type="range" id="blur" min="0" max="10" value="0">
                    </div>
                </div>
            </div>
        </div>

        <script src="script.js"></script>
    </div>
</div>
</body>
</html>